<template>
  <div>
    <div class="scroll-wrap">
      <div>
        <p class="title">享受OMO营销系统权益</p>
        <p v-for="(item, idx) in list" :key="idx" class="text">{{ item }}</p>
        <p class="title">相应服务费比例</p>
        <p
          v-for="(item, index) in ratioList"
          :key="index"
          class="text"
        >{{ item.name }}: {{ item.ratio }}</p>
        <p class="tip">
          <i-icon type="feedback" size="28" color="#e05b49" />&nbsp;&nbsp;若无问题，点击下一步
        </p>
      </div>
      <button class="btn-action-red" @click="next">下一步</button>
    </div>
  </div>
</template>

<script>
import myMixin from '../mixins'
import payMixin from '../mixins/pay'
import { readJSON } from '@/utils/request'
import { getCurrentPageParams } from '@/utils/wx-tools'
export default {
  mixins: [myMixin, payMixin],
  data () {
    return {
      ratio: {}
    }
  },
  computed: {
    list () {
      if (this.openShopIdentity === 'ENTITY') {
        // 实业宝
        return [
          '线上微商城经营，精美模板一键装修',
          '线下收款码收款，线上线下打通',
          '私有化会员体系',
          '丰富营销工具使用',
          '分销市场一键进货销货',
          '可成为平台兜货商',
          '可成为分销市场供货商',
          '消费养老体系',
          '跨店返佣体系'
        ]
      } else if (this.openShopIdentity === 'VIRTUAL') {
        // 网商宝
        return [
          '线上微商城经营，精美模板一键装修',
          '线下收款码收款，线上线下打通',
          '私有化会员体系',
          '丰富营销工具使用',
          '分销市场一键进货销货',
          '消费养老体系',
          '跨店返佣体系'
        ]
      } else {
        // 创业宝
        return [
          '私有化会员体系',
          '消费养老体系',
          '分销商入驻+分销市场，分销赚钱+增值服务推广赚钱'
        ]
      }
    },
    ratioList () {
      return [
        { key: 'poundageRatioOnline', name: '线上订单比例' },
        { key: 'poundageRatioOffline', name: '线下收款比例' },
        { key: 'poundageRatioPlatform', name: '平台订单比例' }
      ]
        .map(_ => ({ ..._, ratio: this.ratio[_.key] }))
        .filter(_ => !!_.ratio)
    },
    hasPaid () {
      return this.$cookie.get('open-shop-has-paid')
    }
  },
  onShow () {
    this.findPoundageRatio()
  },
  methods: {
    next () {
      if (this.$cookie.get('open-shop-has-paid') !== 'Y') {
        this.openShopPay(
          this.openShopIdentity,
          (getCurrentPageParams('amount') * 0.01).toFixed(1)
        )
      } else {
        this.$router.push(
          `/pages/new-open-shop/id-card/main?identity=${this.openShopIdentity}`
        )
      }
    },
    /* api */
    findPoundageRatio () {
      // TO DO
      // use online api rather than local json
      const vm = this
      let url = `/small-store/static/ratio.json`
      readJSON(url)
        .then(r => {
          vm.ratio = r.data[vm.openShopIdentity]
          vm.updateSubmitData(vm.ratio)
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$gray: #f6f6f6;

.scroll-wrap {
  width: 100%;
  // height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .title {
    color: #ea4662;
    font-size: 16px;
    background-color: $gray;
    padding: 10px 20px;
  }
  .text {
    font-size: 16px;
    border-bottom: 1px solid $gray;
    padding: 15px 20px;
  }
  .tip {
    color: #c0c0c0;
    font-size: 14px;
    background-color: $gray;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
